Utilisation de GoogleMaps dans Android

C'est facile, quand on sait comment faire.

Principe

Google Play Service

Afficher des cartes GoogleMaps dans une application Android nous fera manipuler plusieurs classes :

• MapFragment : l'objet que l'on intègrera à notre Layout. C'est le controlleur de notre carte.
• GoogleMap : l'objet d'affichage de la carte. C'est grâce à lui que l'on modifira le zoom, le type de la carte, ou encore les éléments affichés.
• LatLng : cette classe nous permettra de représenter une position sur la planete, grâce à ces propriétés latitude et longitude.
• Marker, Circle, PolyLine et MarkerOptions, CircleOptions, PolyLineOptions : ces classes nous permettrons d'ajouter des éléments à notre carte.

Toutes ces classes sont fournies par "GooglePlayService", qui est une bibliothèque spéciale installée sur les terminaux partagée entre les applications.

L'utilisation des GooglePlayService nécessite l'obtention d'une clef gratuite auprès de Google.

Support

Pour utiliser ces éléments (en particulier les Fragment) tout en gardant la compatibilité pour les plus anciennes versions d'Android, nous intégrerons la bibliotheque "Support" à notre projet.

Installer les dépendances

Depuis le SDK Manager, il faut installer :

• SDK manager / Extras / Android Support Library
• SDK manager / Extras / Google Play services
• SDK manager / Extras / Google Play services for Froyo

Nous les utiliserons plus tard.

Configurer un projet

Créer le projet

Créer ou ouvrir un projet Android.

Il faut noter le package du projet car il nous sera utile pour créer la clef plus tard.

Puisque l'on cible l'API 10, il nous faut copier la bibliothèque de support.

Installer la bibliothèque de Support v4

• Dans le repertoire d'installation du SDK, récupérer le fichier [SDK]/extras/android/support/v4/android-support-v4.jar
• Créer un dossier libs/ dans le dossier du projet.
• Copier le fichier android-support-v4.jar dans le dossier libs/
• Dans Eclipse, rafraichir le projet.

Si le fichier est introuvable, c'est qu'il n'a pas été installé (SDK Manager).

Google Play Services

Un fois installé avec le SDK Manager, il faut importer le projet spécial dans Eclipse.

• Importer le projet : Import... / Android / Existing Android Code Into Workspace
• Parcourir (browse) pour aller chercher le projet : [SDK]/extras/google/google_play_services_froyo/
• Dans la liste, décocher tout sauf : libprojet/google_play_services_lib
• Cocher la case "Copy projects into workspace" (juste en dessous de la liste)
• Finish.

Une fois que le projet est visible dans Eclipse, il faut lier notre projet à celui la.

• Sur le projet qui va contenir la carte : bouton droit / properties ...
• Dans la liste à gauche, choisir "Android"
• En bas, à droite, cliquer sur "Add..." et choisir google_play_services_lib.

Ces étapes nous permettent de manipuler toutes les classes concernant les cartes.

Obtenir une clef

Google impose les développeur d'identifier leurs applications pour pouvoir utiliser certains services comme la cartographie. Cela leur permet de gérer des quotas par application.

Empreinte de l'utilisateur

En ligne de commande, executer la commande suivante :

Sous Linux et Mac OSX :

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Sous Windows ...

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

Voici le genre de sortie obtenu :

Alias name: androiddebugkey Creation date: Jan 01, 2013 Entry type: PrivateKeyEntry Certificate chain length: 1 Certificate[1]: Owner: CN=Android Debug, O=Android, C=US Issuer: CN=Android Debug, O=Android, C=US Serial number: 4aa9b300 Valid from: Mon Jan 01 08:04:04 UTC 2013 until: Mon Jan 01 18:04:04 PST 2033 Certificate fingerprints: MD5: AE:9F:95:D0:A6:86:89:BC:A8:70:BA:34:FF:6A:AC:F9 SHA1: BB:0D:AC:74:D3:21:E1:43:07:71:9B:62:90:AF:A1:66:6E:44:5D:75 Signature algorithm name: SHA1withRSA Version: 3

La ligne qui nous interresse est l'empreinte SHA1 :

SHA1: BB:0D:AC:74:D3:21:E1:43:07:71:9B:62:90:AF:A1:66:6E:44:5D:75

mais seulement l'empreinte :

BB:0D:AC:74:D3:21:E1:43:07:71:9B:62:90:AF:A1:66:6E:44:5D:75

Créer la clef chez Google

Avec l'empreinte et le nom du package, il faut maintenant créer une clef auprès de Google.

• Se connecter au site : https://cloud.google.com/console avec un compte Google.
• Dans API & Auth / APIs, activer Google Maps Android API v2.
• Puis dans API & Auth / Credentials, cliquer sur "Create new Key" / "Android Key"
• Ajouter l'empreinte SHA1 suivi d'un ";" et du package. Par exemple : BB:0D:AC:74:D3:21:E1:43:07:71:9B:62:90:AF:A1:66:6E:44:5D:75;fr.cnam.monprojet
• Copier alors l'"API key" ainsi générée. Exemple : AIazSyDqX2ngCGEjKM1MauQnuARjs96Oy65OGjk

Modifier le Manifest de l'application

Ajout de l'API key

Dans la balise Application

<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="[la clef API KEY de Google ici]"/>

Ajouter les permissions

<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Mise en place

Activity

Pour pouvoir utiliser les fragments avec l'API 10, il faut changer la classe de base de notre Activity qui va contenir la carte.

Modifier simplement la classe parente :

//avant public class MyActivity extends Activity //apres public class MyActivity extends FragmentActivity

Layout

Ajouter dans le Layout de l'activity le fragment qui contiendra la carte, comme n'importe quelle autre vue :

<fragment android:id="@+id/map" android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.google.android.gms.maps.SupportMapFragment" />

A noter que l'on utilise ici SupportMapFragment. On aurait utilisé directement MapFragment si l'on ne passait pas par la bibliothèque de support.

Tester

Enfin !

Il faut maintenant tester sur un terminal, car cela ne marche pas sur les émulateurs Android...

Attention, le terminal doit être connecté pour pouvoir télécharger les cartes (WIFI, 3G).

La carte doit apparaitre à ce niveau. Si ce n'est pas le cas, c'est qu'il y a un problème.

Personnaliser la carte

Récuperation dans l'activity

Il faut commencer par récuperer l'objet SupportMapFragment (que l'on a placé dans le Layout), puis l'objet GoogleMap qu'il contient.

//recupere le fragment SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map); //puis la GoogleMap GoogleMap map = mapFragment.getMap(); if (map == null) { //Google map n'est pas disponible sur ce terminal. return; } //Google map est disponible map.setMapType(GoogleMap.MAP_TYPE_SATELLITE); //GoogleMap.MAP_TYPE_NORMAL, GoogleMap.MAP_TYPE_HYBRID

Ajout d'élements

La plupart des éléments ajoutés à notre carte vont se baser sur une géolocalisation.

C'est la classe LatLng qui permettra de représenter ces positions sur la carte.

Quelques exemples :

LatLng venelles = new LatLng(43.59, 5.48); LatLng newYork = new LatLng(40.71, -74.0); LatLng paris = new LatLng(48.85, 2.35);

Marqueurs

Pour ajouter des marqueurs, il faut commencer par créer un objet MarkerOptions. Ensuite, c'est la carte elle même qui va créer l'objet Marker.

LatLng position = new LatLng(43.59, 5.48); MarkerOptions optionMarqueur = new MarkerOptions(); optionMarqueur.position(position); optionMarqueur.title("Venelles City"); optionMarqueur.snippet("8 185 habitants"); Marker venelles = map.addMarker(optionMarqueur);

Par defaut, le marqueur s'affichera sur la carte, et affichera un panneau de détail lors qu'on cliquera dessus.

Cercles

Sur le même principe, on peut dessiner des cercles sur la carte.

LatLng position = new LatLng(43.59, 5.48); CircleOptions optionCercle = new CircleOptions(); optionCercle.center(position); optionCercle.radius(1000); //en metres optionCercle.strokeColor(0xff00ff00); //AARRVVBB optionCercle.fillColor(0x5500ff00); //AARRVVBB optionCercle.strokeWidth(5); //en px map.addCircle(optionCercle);

Lignes et chemins

Sur le même principe, on peut dessiner des lignes "multipoints" sur la carte.

LatLng position1 = new LatLng(43.59, 5.48); LatLng position2 = new LatLng(48.85, 2.35); LatLng position3 = new LatLng(40.71, -74.0); PolylineOptions optionLigne = new PolylineOptions(); optionLigne.add(position1); optionLigne.add(position2); optionLigne.add(position3); optionLigne.color(0xff00ff00); //AARRVVBB optionLigne.width(5); //en px map.addPolyline(optionLigne);

Gérer la camera

L'utilisateur peut naviguer sur la carte, mais il est possible de déplacer la "camera" avec du code.

On a besoin pour cela d'un objet CameraUpdate qui va contenir toutes les infos de placement (zoom, position,...).

Pour construire facilement des objets CameraUpdate, il faut utiliser la classe CameraUpdateFactory :

Exemples :

LatLng venelles = new LatLng(43.59, 5.48); //deplacement seul CameraUpdate camera1 = CameraUpdateFactory.newLatLng(venelles); //deplacement et zoom CameraUpdate camera2 = CameraUpdateFactory.newLatLngZoom(venelles, 10); //zoom entre 2 (large) et 21 (serré) //zoom seul CameraUpdate camera3 = CameraUpdateFactory.zoomTo(10);

Une fois que l'objet CameraUpdate est créé, il faut le passer à la GoogleMap.

Le changement peut etre instantanté ou animé :

Changement direct :

map.moveCamera(camera1);

Changement animé (2000 ms) :

map.animateCamera(camera1, 2000, null);

Gérer les clicks sur les markers

Il est possible d'être notifié du click sur les marqueurs. Pour cela il suffit d'utiliser la méthode setOnMarkerClickListener(OnMarkerClickListener listener); sur un objet GoogleMap.

L'objet qui implémente l'interface OnMarkerClickListener doit implémenter la méthode :

public boolean onMarkerClick(Marker marker) { System.out.println("Le marqueur " + marker.getTitle() + " vient d'être cliqué."); return false; }

Si la méthode retourne false, alors le comportement par defaut du clic s'executera : la carte se recentre sur le marqueur cliqué et le panneau detail s'ouvre. Sinon, il ne se passe rien.

T.P.

Créer un projet avec une carte et 3 boutons.

Sur la carte, afficher 3 marqueurs sur des villes importantes.

Sur la carte, dessiner un chemin qui relie les 3 villes (vol d'oiseau).

Chaque bouton permet de déplacer la camera vers 1 ville en particulier.